<template>
  <div class="error">
    <div class="svg">
      <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48">
        <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
      </svg>
    </div>
    <h2 v-if="error.statusCode === 404">页面不存在</h2>
    <h2 v-else>应用发生错误异常</h2>
    <nuxt-link to="/">回 到 首 页</nuxt-link>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    // layout: 'blog' // 你可以为错误页面指定自定义的布局
  }
</script>
<style lang="scss" scoped>
  .error {
    text-align: center;
    height: 60vh;
    padding-top: 20vh;
    h2 {
      margin: 20px 0;
    }
    a {
      color: $base-color;
      font-size: 20px;
      font-weight: 600;
    }
  }
</style>
